<template>
  <div class="travel-approval">
    <!-- 标题容器：居中显示 -->
    <div style="width: 90%; margin: 0 auto; text-align: center; margin-bottom: 10px;">
      <!-- <h1>差旅报销审批</h1> -->
    </div>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="text-align: left; position: relative;">
      <el-form-item label="报销人">
        <el-input v-model="queryForm.ename" placeholder="请输入报销人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">查询</el-button>
      </el-form-item>

      <el-form-item style="float: right;">
        <el-button type="primary" @click="ShowAll" style="width: 120px;">{{ all ? '显示待审核' : '显示全部' }}</el-button>
      </el-form-item>
    </el-form>
    
    <el-table 
      :data="tableData" 
      border 
      style="width: 90%; margin: 0 auto;"
      height="390px"
    >
      <!-- 序号列 -->
      <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
      <!-- 单据序号列 -->
      <el-table-column prop="travelId" label="单据序号"  align="center" width="190"></el-table-column>

      <!-- 姓名列 -->
      <el-table-column  prop="ename" label="报销人" align="center" width="190">
        <template #default="scope">
          <span>{{ scope.row.ename}}</span>
        </template>
      </el-table-column>

      <!-- 出差事由列 -->
      <el-table-column prop="reason" label="出差事由" align="center"></el-table-column>

      <!-- 报销金额列 -->
      <el-table-column prop="money" label="报销金额" align="center" width="120"></el-table-column>

      <!-- 操作列（详情按钮） -->
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="mini" 
            @click="handleDetail(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container" style="width: 90%; margin: 20px auto; text-align: center;">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 8, 10]"
          :page-size="queryForm.limit"
          layout="prev, pager, next, total, sizes, jumper"
          :total="total"
        ></el-pagination>
    </div>

    <!-- 弹出窗体 -->
    <travel-info 
      :isShow="visible" 
      :travelInfo="travelForm" 
      :roleid="roleid"
      @closeDialog="visible = false"
      @stuSave="tableLoad"
    />
  </div>
</template>

<script>
import TravelInfo from '@/components/TravelInfo.vue';

export default {
  name: "TravelApproval",
  components: {
    TravelInfo
  },
  data() {
    return {
      tableData: [], 
      visible: false,  
      travelForm: {},  
      roleid: this.parseRoleIds(localStorage.getItem('roleid')), 
      queryForm: {
        page: 1,
        limit: 5,
        empno: localStorage.getItem('empno'),
        ename: '',
        roleid: this.parseRoleIds(localStorage.getItem('roleid')),
        all: false // 是否查询全部
      },
      total: 0 ,
      all: false
    };
  },
  methods: {
    handleDetail(row) {
      this.travelForm = row;
      this.visible = true;
    },
    ShowAll() {
      this.all = !this.all;
      this.queryForm.all = this.all ? true : false;
      this.queryForm.page = 1;
      this.getTableData();
    },

    getTableData() {
      this.$http.post('/getTravelListByEmpno', this.queryForm)
      .then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;

        for(let i = 0; i < this.tableData.length; i++) {
          this.$http.get('/getEnameByEmpno?empno=' + res.data.records[i].empno).then(res1 => {
                this.$set(this.tableData[i], 'ename', res1.data);
          })
        }
      })
    },

    // 处理分页大小变化
    handleSizeChange(val) {
      this.queryForm.limit = val;
      this.getTableData();
    },
    
    // 处理页码变化
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.getTableData();
    },
    
    tableLoad(msg) {
      if (msg === 'success') {
        this.visible = false;
        this.$message.success("保存成功");
        this.getTableData();
      }
    },

    parseRoleIds(roleIdsStr) {
    if (!roleIdsStr) return [];
    return roleIdsStr.split(',').map(id => Number(id)).filter(id => !isNaN(id));
  },
  },

  created() {
    this.getTableData();
  }
};
</script>

<style scoped>
.travel-approval {
  padding: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>
